<template>
  <view class="address tn-safe-area-inset-bottom">
    <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false"
      >地址管理</tn-navbar
    >

    <view class="address-list">
      <view
        class="address-item tn-flex-row"
        v-for="(address, index) in addressList"
      >
        <view class="address-item-info tn-flex-5 tn-flex-column">
          <view class="member-info tn-flex-row">
            <view class="member-name">{{ address.name }}</view>
            <view class="member-mobile">{{ address.mobile }}</view>
          </view>
          <view class="area-info">{{ address.areaName }}-{{ address.address }}</view>
        </view>
        <view class="address-item-action tn-flex-1">
          <tn-icon
            class="address-edit tn-color-main"
            icon="edit"
            @click="toAdd(index)"
          ></tn-icon>
        </view>
      </view>
      <view>
        <tn-empty :show="addressList.length == 0" mode="address"></tn-empty>
      </view>
    </view>
    <view class="address-tool tn-bg-main" @click="toAdd(-1)">
      新增收货地址
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import TnEmpty from "@/tuniao-ui/components/tn-empty/src/Empty.vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import { navPage } from "@/tuniao-ui/utils";
import { onShow } from "@dcloudio/uni-app";
import { findAddress } from "@/api/address";
import { ResultEnum } from "@/enums/httpEnum";

// 收货地址接口
interface AddressVO {
    id: number;
    memberId: number;
    areaId: number;
    areaName: string;
    address: string;
    name: string;
    mobile: string;
    isDef: number;
}

const addressList = ref<AddressVO[]>([]);

function toAdd(index: number) {
  console.log("toAdd", index);
  if (index === -1) {
    //新增
    navPage("/pages/mine/address/addAddress");
  } else {
    // 编辑
    let address = addressList.value[index];
   
    navPage("/pages/mine/address/addAddress?addressInfo=" + encodeURIComponent(JSON.stringify(address)));
  }
}

onShow(() => {
  findAddress().then((res) => {
    if (res.code === ResultEnum.SUCCESS) {
      addressList.value = res.result;
    }
  });
});
</script>

<style lang="scss" scoped>
body {
  background-color: #fff;
}
.address {
  background-color: #fff;

  &-list {
    padding: 0 20rpx;
    .address-item {
      margin-top: 30rpx;
      border-bottom: 1px #ccc solid;
      padding-bottom: 20rpx;
      .member-info {
        align-items: center;
        .member-mobile {
          margin-left: 20rpx;
          font-size: 20rpx;
          color: #999;
        }
      }
      .area-info {
        margin-top: 20rpx;
      }

      &-action {
        justify-content: center;
        align-items: center;
        .address-edit {
          font-size: 40rpx;
        }
      }
    }
  }
  .address-tool {
    height: 100rpx;
    padding: 0 20rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
  }
}
</style>
